---
title: Tour
description: An overlay that outlines provided refs for touring an application.
component: true
---

<ComponentPreview 
   name="tour-demo" 
   description="A tooltip component."
   styleSwitch={true}
   button="copy"
   dots={false}
 />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx nyxb@latest add tour
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="tour" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Usage

```tsx filename="tour.tsx"
import { TourFactory } from "~/registry/miami/ui/tour"

const tour = TourFactory([
  "buttonOne",
  "buttonTwo",
  "missingButton",
  "buttonFour",
])

export default tour
```

```tsx filename="tourDisplay.tsx"
const TourDisplay = (props: {
  children: React.ReactNode
  title?: string
  description?: string
}) => {
  const ctx = tour.useContext()
  return (
    <Card className="w-[350px]">
      <CardHeader>
        <CardTitle>{props.title}</CardTitle>
        <CardDescription>{props.description}</CardDescription>
      </CardHeader>
      <CardContent>{props.children}</CardContent>
      <CardFooter>
        {ctx.current < ctx.nodes.size ? (
          <div className="flex w-full justify-between">
            <Button variant="outline" onClick={ctx.close}>
              Close
            </Button>
            <div>
              <Button onClick={ctx.previous}>Previous</Button>
              <Button onClick={ctx.next}>Next</Button>
            </div>
          </div>
        ) : (
          <div className="flex w-full justify-end">
            <Button onClick={ctx.previous}>Previous</Button>
            <Button className="bg-green-800" onClick={ctx.close}>
              Finish
            </Button>
          </div>
        )}
      </CardFooter>
    </Card>
  )
}
```

```tsx filename="app.tsx"
import tour from "./tourApp.tsx"

const TourApplication = () => {
  const ctx = tour.useContext()
  return (
    <div className="flex h-96 w-full items-center justify-center">
      <div className="absolute bottom-2 left-2 flex gap-2">
        <tour.TourFocus
          name="buttonOne"
          tourRender={
            <TourDisplay title="Create Incident">
              <h1>This button creates an incident</h1>
              <p>helpful text about this button</p>
            </TourDisplay>
          }
        >
          <Button>Create Incident</Button>
        </tour.TourFocus>
        <tour.TourFocus
          name="buttonFour"
          tourRender={
            <TourDisplay title="Update Incident">
              <h1>This button pushes your updates</h1>
              <p>helpful text about this button</p>
            </TourDisplay>
          }
        >
          <Button>Update Incident</Button>
        </tour.TourFocus>
      </div>
      <div className="absolute right-2 top-12 flex gap-2">
        <tour.TourFocus
          name="buttonTwo"
          tourRender={
            <TourDisplay title="Resolve Incident">
              <h1>This button Resolves the Incident</h1>
              <p>helpful text about this button</p>
            </TourDisplay>
          }
        >
          <Button>Resolve Incident</Button>
        </tour.TourFocus>
      </div>
      <div>
        <tour.TourFocus
          name="emailInput"
          tourRender={
            <TourDisplay title="Email Input">
              <h1>This is where you put incident info</h1>
              <p>helpful text about this input</p>
            </TourDisplay>
          }
        >
          <Input type="email" placeholder="Email" />
        </tour.TourFocus>
      </div>
      <div className="absolute bottom-2 right-2">
        <Button onClick={ctx.open}>Open Tour</Button>
      </div>
    </div>
  )
}

export default TourApplication
```

```tsx filename="index.tsx"
import TourApplication from "./tourApp.tsx"

export default function TourDemo() {
  return (
    <tour.TourProvider>
      <TourApplication />
    </tour.TourProvider>
  )
}
```
